React memo: Komponenttien memoisoinnin ja renderöinnin optimoinnin hallinta

React-kehityksen maailmassa suorituskyky on ensisijaisen tärkeää. Sovellusten monimutkaistuessa sujuvan ja tehokkaan renderöinnin varmistaminen on yhä kriittisempää. Yksi tehokas työkalu React-kehittäjän arsenaalissa tämän saavuttamiseksi on React.memo. Tämä blogikirjoitus syventyy React.memo:n yksityiskohtiin, tutkien sen tarkoitusta, käyttöä ja parhaita käytäntöjä renderöintisuorituskyvyn optimoimiseksi.

Mitä on komponenttien memoisointi?

Komponenttien memoisointi on optimointitekniikka, joka estää komponentin turhan uudelleenrenderöinnin, kun sen propsit eivät ole muuttuneet. Muistamalla renderöidyn tuloksen tietyille propseille React voi ohittaa komponentin uudelleenrenderöinnin, jos propsit pysyvät samoina. Tämä johtaa merkittäviin suorituskykyparannuksiin erityisesti laskennallisesti raskaiden tai usein uudelleenrenderöityvien komponenttien kohdalla.

Ilman memoisointia React-komponentit renderöityvät uudelleen aina, kun niiden vanhempikomponentti renderöityy uudelleen, vaikka lapsikomponentille välitetyt propsit eivät olisikaan muuttuneet. Tämä voi johtaa ketjureaktioon uudelleenrenderöinneissä koko komponenttipuussa, mikä vaikuttaa sovelluksen yleiseen suorituskykyyn.

Esittelyssä React.memo

React.memo on Reactin tarjoama korkeamman asteen komponentti (higher-order component, HOC), joka memoisoi funktionaalisen komponentin. Se käytännössä kertoo Reactille, että sen tulee "muistaa" komponentin tuloste tietyillä propseilla ja renderöidä komponentti uudelleen vain, jos propsit ovat todella muuttuneet.

Miten React.memo toimii

React.memo vertaa nykyisiä propseja aiempiin pinnallisesti. Jos propsit ovat samat (tai jos mukautettu vertailufunktio palauttaa arvon true), React.memo ohittaa komponentin uudelleenrenderöinnin. Muussa tapauksessa se renderöi komponentin uudelleen normaalisti.

React.memo:n peruskäyttö

Käyttääksesi React.memo:a, kääri funktionaalinen komponenttisi sillä:

            import React from 'react';

const MyComponent = (props) => {
  // Komponentin logiikka
  return (
    <div>
      {props.data}
    </div>
  );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

Tässä esimerkissä MyComponent renderöityy uudelleen vain, jos data-propsin arvo muuttuu. Jos data-propsin arvo pysyy samana, React.memo estää komponentin uudelleenrenderöinnin.

Pinnallisen vertailun ymmärtäminen

Kuten aiemmin mainittiin, React.memo suorittaa propsien pinnallisen vertailun. Tämä tarkoittaa, että se vertaa vain propseina välitettyjen objektien ja taulukoiden ylimmän tason ominaisuuksia. Se ei vertaa syvällisesti näiden objektien tai taulukoiden sisältöä.

Pinnallinen vertailu tarkistaa, ovatko viittaukset objekteihin tai taulukoihin samat. Jos välität propseina objekteja tai taulukoita, jotka luodaan lennosta tai joita mutaoidaan, React.memo todennäköisesti pitää niitä erilaisina, vaikka niiden sisältö olisi sama, mikä johtaa turhiin uudelleenrenderöinteihin.

Esimerkki: Pinnallisen vertailun sudenkuopat

            import React, { useState } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Komponentti renderöity!');
  return <div>{props.data.name}</div>;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // Tämä saa MyComponentin renderöitymään uudelleen joka kerta
    // koska uusi objekti luodaan jokaisella klikkauksella.
    setData({ ...data });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Päivitä data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Tässä esimerkissä, vaikka data-objektin name-ominaisuus ei muutu, MyComponent renderöityy silti uudelleen joka kerta, kun painiketta klikataan. Tämä johtuu siitä, että uusi objekti luodaan spread-operaattorilla ({ ...data }) jokaisella klikkauksella, mikä johtaa eri viittaukseen.

Mukautettu vertailufunktio

Pinnallisen vertailun rajoitusten voittamiseksi React.memo antaa mahdollisuuden antaa mukautetun vertailufunktion toisena argumenttina. Tämä funktio saa kaksi argumenttia: aiemmat propsit ja seuraavat propsit. Sen tulisi palauttaa true, jos propsit ovat samat (mikä tarkoittaa, että komponenttia ei tarvitse renderöidä uudelleen) ja muuten false.

Syntaksi

            React.memo(MyComponent, (prevProps, nextProps) => {
  // Mukautettu vertailulogiikka
  return true; // Palauta true estääksesi uudelleenrenderöinnin, false salliaksesi sen
});

            

              
                Copy
              
            
          

Esimerkki: Mukautetun vertailufunktion käyttö

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Komponentti renderöity!');
  return <div>{props.data.name}</div>;
}, (prevProps, nextProps) => {
  // Renderöi uudelleen vain, jos name-ominaisuus muuttuu
  return prevProps.data.name === nextProps.data.name;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // Tämä saa MyComponentin renderöitymään uudelleen vain, jos nimi muuttuu
    setData({ ...data, age: data.age + 1 });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Päivitä data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Tässä esimerkissä mukautettu vertailufunktio tarkistaa vain, onko data-objektin name-ominaisuus muuttunut. Siksi MyComponent renderöityy uudelleen vain, jos name muuttuu, vaikka muut data-objektin ominaisuudet päivittyisivät.

Milloin käyttää React.memo:a

Vaikka React.memo voi olla tehokas optimointityökalu, on tärkeää käyttää sitä harkitusti. Sen soveltaminen jokaiseen sovelluksen komponenttiin voi itse asiassa heikentää suorituskykyä pinnallisen vertailun aiheuttaman ylikuormituksen vuoksi.

Harkitse React.memo:n käyttöä seuraavissa tilanteissa:

• Komponentit, jotka renderöidään usein uudelleen: Jos komponentti renderöidään usein uudelleen, vaikka sen propsit eivät olisi muuttuneet, React.memo voi merkittävästi vähentää turhien uudelleenrenderöintien määrää.
• Laskennallisesti raskaat komponentit: Jos komponentti suorittaa monimutkaisia laskelmia tai renderöi suuren määrän dataa, turhien uudelleenrenderöintien estäminen voi parantaa suorituskykyä.
• Puhtaat komponentit: Jos komponentin tuloste määräytyy yksinomaan sen propsien perusteella, React.memo on hyvä valinta.
• Kun vastaanotetaan propseja vanhempikomponenteista, jotka saattavat renderöityä usein uudelleen: Memoisoi lapsikomponentti välttääksesi tarpeettoman uudelleenrenderöinnin.

Vältä React.memo:n käyttöä seuraavissa tilanteissa:

• Komponentit, jotka renderöidään harvoin uudelleen: Pinnallisen vertailun aiheuttama ylikuormitus voi ylittää memoisoinnin hyödyt.
• Komponentit, joiden propsit muuttuvat usein: Jos propsit muuttuvat jatkuvasti, React.memo ei estä montaa uudelleenrenderöintiä.
• Yksinkertaiset komponentit, joilla on minimaalinen renderöintilogiikka: Suorituskykyhyödyt voivat olla mitättömiä.

React.memo:n yhdistäminen muihin optimointitekniikoihin

React.memo:a käytetään usein yhdessä muiden Reactin optimointitekniikoiden kanssa maksimaalisten suorituskykyhyötyjen saavuttamiseksi.

useCallback

useCallback on React-hook, joka memoisoi funktion. Se palauttaa funktion memoisoidun version, joka muuttuu vain, jos jokin sen riippuvuuksista on muuttunut. Tämä on erityisen hyödyllistä, kun funktioita välitetään propseina memoisoiduille komponenteille.

Ilman useCallback:iä uusi funktioinstanssi luodaan jokaisella vanhempikomponentin renderöinnillä, vaikka funktion logiikka pysyisikin samana. Tämä saa React.memo:n pitämään funktiopropsia muuttuneena, mikä johtaa turhiin uudelleenrenderöinteihin.

Esimerkki: useCallback:in käyttö React.memo:n kanssa

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Komponentti renderöity!');
  return <button onClick={props.onClick}>Klikkaa minua</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <MyComponent onClick={handleClick} />
      <p>Laskuri: {count}</p>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Tässä esimerkissä useCallback varmistaa, että handleClick-funktio luodaan uudelleen vain, kun count-tila muuttuu. Tämä estää MyComponent:ia renderöitymästä tarpeettomasti uudelleen, kun vanhempikomponentti renderöityy count-tilan päivityksen vuoksi.

useMemo

useMemo on React-hook, joka memoisoi arvon. Se palauttaa memoisoidun arvon, joka muuttuu vain, jos jokin sen riippuvuuksista on muuttunut. Tämä on hyödyllistä monimutkaisten laskelmien tai johdettujen tietojen memoisoimiseksi, jotka välitetään propseina memoisoiduille komponenteille.

Samoin kuin useCallback:in kanssa, ilman useMemo:a monimutkaiset laskelmat suoritettaisiin uudelleen jokaisella renderöinnillä, vaikka syötearvot eivät olisikaan muuttuneet. Tämä voi vaikuttaa merkittävästi suorituskykyyn.

Esimerkki: useMemo:n käyttö React.memo:n kanssa

            import React, { useState, useMemo } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Komponentti renderöity!');
  return <div>{props.data}</div>;
});

const ParentComponent = () => {
  const [input, setInput] = useState('');

  const data = useMemo(() => {
    // Simuloi monimutkaista laskentaa
    console.log('Lasketaan dataa...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return input + result;
  }, [input]);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <MyComponent data={data} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Tässä esimerkissä useMemo varmistaa, että data-arvo lasketaan uudelleen vain, kun input-tila muuttuu. Tämä estää MyComponent:ia renderöitymästä tarpeettomasti uudelleen ja välttää monimutkaisen laskennan suorittamisen uudelleen jokaisella vanhempikomponentin renderöinnillä.

Käytännön esimerkkejä ja tapaustutkimuksia

Tarkastellaan muutamia todellisen maailman tilanteita, joissa React.memo:a voidaan käyttää tehokkaasti:

Esimerkki 1: Listan alkio -komponentin optimointi

Kuvittele, että sinulla on listakomponentti, joka renderöi suuren määrän listan alkioita. Jokainen listan alkio vastaanottaa dataa propseina ja näyttää sen. Ilman memoisointia joka kerta, kun listakomponentti renderöityy uudelleen (esim. vanhempikomponentin tilan päivityksen vuoksi), kaikki listan alkiot renderöityvät myös uudelleen, vaikka niiden data ei olisi muuttunut.

Käärimällä listan alkio -komponentin React.memo:lla voit estää turhia uudelleenrenderöintejä ja parantaa merkittävästi listan suorituskykyä.

Esimerkki 2: Monimutkaisen lomakkeen optimointi

Ajattele lomakekomponenttia, jossa on useita syöttökenttiä ja monimutkainen validointilogiikka. Tämä komponentti voi olla laskennallisesti raskas renderöidä. Jos lomake renderöidään usein uudelleen, se voi vaikuttaa sovelluksen yleiseen suorituskykyyn.

Käyttämällä React.memo:a ja hallitsemalla huolellisesti lomakekomponentille välitettyjä propseja (esim. käyttämällä useCallback:iä tapahtumankäsittelijöille), voit minimoida turhat uudelleenrenderöinnit ja parantaa lomakkeen suorituskykyä.

Esimerkki 3: Kaaviokomponentin optimointi

Kaaviokomponentit sisältävät usein monimutkaisia laskelmia ja renderöintilogiikkaa. Jos kaaviokomponentille välitetty data ei muutu usein, React.memo:n käyttö voi estää turhia uudelleenrenderöintejä ja parantaa kaavion reagoivuutta.

Parhaat käytännöt React.memo:n käyttöön

Maksimoidaksesi React.memo:n hyödyt, noudata näitä parhaita käytäntöjä:

• Profiloi sovelluksesi: Ennen React.memo:n soveltamista, käytä Reactin Profiler-työkalua tunnistaaksesi komponentit, jotka aiheuttavat suorituskyvyn pullonkauloja. Tämä auttaa sinua keskittämään optimointipyrkimyksesi kriittisimmille alueille.
• Mittaa suorituskykyä: Kun olet soveltanut React.memo:a, mittaa suorituskyvyn parannus varmistaaksesi, että sillä on todella vaikutusta.
• Käytä mukautettuja vertailufunktioita huolellisesti: Kun käytät mukautettuja vertailufunktioita, varmista, että ne ovat tehokkaita ja vertaavat vain olennaisia ominaisuuksia. Vältä kalliiden operaatioiden suorittamista vertailufunktiossa.
• Harkitse muuttumattomien (immutable) tietorakenteiden käyttöä: Muuttumattomat tietorakenteet voivat yksinkertaistaa propsien vertailua ja helpottaa turhien uudelleenrenderöintien estämistä. Kirjastot kuten Immutable.js voivat olla tässä avuksi.
• Käytä useCallback:iä ja useMemo:a: Kun välität funktioita tai monimutkaisia arvoja propseina memoisoiduille komponenteille, käytä useCallback:iä ja useMemo:a estääksesi turhia uudelleenrenderöintejä.
• Vältä objektien luomista lennosta: Objektien luominen lennosta propseina ohittaa memoisoinnin, koska uusi objekti luodaan jokaisella renderöintisyklillä. Käytä useMemo:a tämän välttämiseksi.

Vaihtoehtoja React.memo:lle

Vaikka React.memo on tehokas työkalu komponenttien memoisointiin, on olemassa muita lähestymistapoja, joita voit harkita:

• PureComponent: Luokkakomponenteille PureComponent tarjoaa samanlaisen toiminnallisuuden kuin React.memo. Se suorittaa pinnallisen propsien ja tilan vertailun ennen uudelleenrenderöintiä.
• Immer: Immer on kirjasto, joka yksinkertaistaa muuttumattomien tietojen kanssa työskentelyä. Sen avulla voit muokata dataa muuttumattomasti käyttämällä muuttuvaa API:a, mikä voi olla hyödyllistä React-komponenttien optimoinnissa.
• Reselect: Reselect on kirjasto, joka tarjoaa memoisoituja selektoreita Reduxille. Sitä voidaan käyttää datan johtamiseen Redux-storesta tehokkaasti ja estämään siitä riippuvaisten komponenttien turhia uudelleenrenderöintejä.

Edistyneitä näkökohtia

Contextin ja React.memo:n käsittely

Komponentit, jotka kuluttavat React Contextia, renderöityvät uudelleen aina, kun kontekstin arvo muuttuu, vaikka niiden propsit eivät olisi muuttuneet. Tämä voi olla haaste käytettäessä React.memo:a, koska memoisointi ohitetaan, jos kontekstin arvo muuttuu usein.

Tämän ratkaisemiseksi harkitse useContext-hookin käyttöä ei-memoisoidussa komponentissa ja välitä sitten relevantit arvot propseina memoisoidulle komponentille. Tämä antaa sinulle mahdollisuuden hallita, mitkä kontekstin muutokset laukaisevat memoisoidun komponentin uudelleenrenderöinnin.

React.memo-ongelmien vianmääritys

Jos koet odottamattomia uudelleenrenderöintejä käyttäessäsi React.memo:a, voit tarkistaa muutamia asioita:

• Varmista, että propsit ovat todella samat: Käytä console.log:ia tai debuggeria tutkiaksesi propseja ja varmistaaksesi, että ne ovat todellakin samat ennen ja jälkeen uudelleenrenderöinnin.
• Tarkista objektien luominen lennosta: Vältä objektien luomista lennosta propseina, koska tämä ohittaa memoisoinnin.
• Tarkista mukautettu vertailufunktiosi: Jos käytät mukautettua vertailufunktiota, varmista, että se on toteutettu oikein ja vertaa vain olennaisia ominaisuuksia.
• Tutki komponenttipuuta: Käytä Reactin DevTools-työkaluja tutkiaksesi komponenttipuuta ja tunnistaaksesi, mitkä komponentit aiheuttavat uudelleenrenderöinnit.

Yhteenveto

React.memo on arvokas työkalu renderöintisuorituskyvyn optimointiin React-sovelluksissa. Ymmärtämällä sen tarkoituksen, käytön ja rajoitukset voit käyttää sitä tehokkaasti estämään turhia uudelleenrenderöintejä ja parantamaan sovellustesi yleistä tehokkuutta. Muista käyttää sitä harkitusti, yhdistää se muihin optimointitekniikoihin ja mitata aina suorituskykyvaikutus varmistaaksesi, että sillä on todella merkitystä.

Soveltamalla huolellisesti komponenttien memoisointitekniikoita voit luoda sulavampia, reagoivampia React-sovelluksia, jotka tarjoavat paremman käyttäjäkokemuksen.

Lisälukemista ja resursseja

• React.memo Documentation
• Optimizing Performance in React
• useMemo and useCallback